<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>创建元素</title>
   <script>
    window.onload=function(){
	   var oBtn=document.getElementById("btn1");
       var oUl=document.getElementById("ul1");
	   var oTxt=document.getElementById("txt1");
       oBtn.onclick=function(){
	      //创建元素
	      var oLi=document.createElement("li");
		  var aLi=oUl.getElementsByTagName("li");
		  
		  oLi.innerHTML=oTxt.value;
	      //父级.appendChild(子节点);
		  // oUl.appendChild(oLi); 
		 if(aLi.length>0){
		   //在坐标地址前插入元素
		  oUl.insertBefore(oLi,aLi[0]);
		  }else{
		  //在元素后面添加元素
		   oUl.appendChild(oLi);
		  }
	   };
	   
	};
      
   </script>
</head>
<body>
  <input id="txt1" type="text"/>
  <input id="btn1" type="button" value="创建li元素的按钮">
   <ul id="ul1">
   
   </ul>

</body>
</html>